<template>
  <div class="v-model">
    <h2 @click="val = val.split('').reverse().join('')">{{ val }}</h2>

    <!-- 如果组件的自定义属性变量是value，发送出来的自定义事件名称叫input，这两句代码就可以缩写成 v-model ，这就是组件的 v-model 的定义 -->
    <string-box v-model="val">
      <!-- <h1 slot="middle">我是组件的子标签</h1> -->
    </string-box>
    <string-box
      :value="val"
      @input="val = $event"
    />

    <input type="text" v-model="val" />

    <input type="text" :value="val" @input="val = $event.target.value" />



  </div>
</template>


<script>
import StringBox from '@/components/StringBox.vue';
export default {
  components: {
    StringBox
  },
  data() {
    return {
      val: "ABCD",
    };
  }
};
</script>

<style lang="sass" scoped>
.box
  width: 200px
  height: 900px
  background: skyblue
</style>
